<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="Accesos"></h:outputText>
        </ui:define>

        <ui:define name="cuerpo">
            <p:growl id="message" showDetail="true" />
            <h:form id="form">
                <p:growl id="validacionMensaje" showDetail="true" autoUpdate="true"/>
                <p:panel header="Administración de Accesos" style="font-size: small">
                    <table width="100%" border="0" >
                        <p:commandButton value="Crear" style="font-size: small" action="#{accesoBean.cargarNuevo()}" 
                                         update="@form:dlDialog" oncomplete="PF('dlDialogVar').show()"
                                         icon="ui-icon-circle-plus" process="@this">
                        </p:commandButton>        

                    </table> 

                    <p:dataTable id="dtAccesos" var="item" value="#{accesoBean.accesos}" widgetVar="tablaAccesos"                                                                  
                                 emptyMessage="No existen datos"
                                 style="margin-top: 10px; font-size: x-small; text-align: center"                                
                                 paginator="true" rows="10" rowKey="#{item.codAcceso}">

                        <f:facet name="header">
                            <p:outputPanel>
                                <h:outputText value="Buscar por todos los criterios:" />
                                <p:inputText id="globalFilter" onkeyup="PF('tablaAccesos').filter()" 
                                             style="width:200px" placeholder="Ingrese la palabra clave"/>
                            </p:outputPanel>
                        </f:facet>   

                        <p:column headerText="Nombre" filterBy="#{item.nombre}">
                            <p:outputLabel value="#{item.nombre}" style="text-align: center"/>
                        </p:column>

                        <p:column style="text-align: left" headerText="Roles asignados">
                            <ui:repeat value="#{item.rolList}" var="rol">
                                <li><p:outputLabel value="#{rol.nombre}"/></li>
                            </ui:repeat>
                        </p:column>

                        <p:column headerText="Herramientas" >                                                        
                            <div align="center">

                                <p:commandButton value="Modificar" action="#{accesoBean.cargarModificar()}" update="@form:dlDialog" 
                                                 oncomplete="PF('dlDialogVar').show()" process="@this">
                                    <f:setPropertyActionListener value="#{item}" target="#{accesoBean.acceso}" />
                                </p:commandButton>  | 

                                <p:commandButton value="Detalles" action="#{accesoBean.cargarDetalles()}" update="@form:dlDialog:" 
                                                 oncomplete="PF('dlDialogVar').show()" process="@this">
                                    <f:setPropertyActionListener value="#{item}" target="#{accesoBean.acceso}" />
                                </p:commandButton>                                

                            </div>
                        </p:column> 
                    </p:dataTable>

                </p:panel>

                <p:dialog id="dlDialog" resizable="false" header="#{accesoBean.tituloDialogo}"  appendTo="@(body)"
                          widgetVar="dlDialogVar" modal="true" showEffect="fade" hideEffect="fade" dynamic="true">

                    <p:panel id="dlAcceso" style="text-align:center; font-size: small;">
                        <p:panelGrid columns="3" rendered="#{not empty accesoBean.acceso}" 
                                     columnClasses="label,value" style="margin: 0 auto;">                                

                            <p:outputLabel value="Menú principal:"/>
                            <p:selectOneMenu id="cboMenuPrincipal" filter="true" filterMatchMode="contains" 
                                             value="#{accesoBean.acceso.menu}"
                                             converter="#{accesoConverter}"
                                             styleClass="menu" panelStyleClass="panel"
                                             style="width: 200px; font-size: small;" disabled="#{accesoBean.soloLectura}">
                                <f:selectItem itemLabel="Seleccione..." itemValue="#{null}" noSelectionOption="true" />
                                <f:selectItems value="#{accesoBean.menus}" var="menu"
                                               itemLabel="#{menu.nombre}" itemValue="#{menu}"/>
                                <p:ajax update="cboSubMenu,txtControlador" partialSubmit="true" process="@this" />  
                            </p:selectOneMenu>
                            <p:tooltip style="font-size: small;" for="cboMenuPrincipal" value="Elegir a qué menú pertenecerá el nuevo acceso" />

                            <p:outputLabel value="Submenú:"/>
                            <p:selectOneMenu id="cboSubMenu" filter="true" filterMatchMode="contains" 
                                             value="#{accesoBean.acceso.submenu}"
                                             disabled="#{accesoBean.acceso.menu eq null || 
                                                         accesoBean.soloLectura || 
                                                         accesoBean.submenus.size() eq 0}"
                                             converter="#{accesoConverter}"
                                             styleClass="menu" panelStyleClass="panel"
                                             style="width: 200px; font-size: small;">
                                <f:selectItem itemLabel="Seleccione..." itemValue="#{null}" noSelectionOption="true" />
                                <f:selectItems value="#{accesoBean.submenus}" var="submenu"
                                               itemLabel="#{submenu.nombre}" itemValue="#{submenu}"/>
                            </p:selectOneMenu>
                            <p:tooltip style="font-size: small;" for="cboSubMenu" value="Elegir a qué submenú pertenecerá el nuevo acceso" />

                            <p:outputLabel value="Controlador" for="txtControlador"/>
                            <p:inputText id="txtControlador" value="#{accesoBean.acceso.controlador}" title="Controlador" 
                                         style="width: 200px"
                                         disabled="#{accesoBean.acceso.menu eq null}"
                                         readonly="#{accesoBean.soloLectura}"/>
                            <p:outputLabel value=""/>
                            
                            <p:outputLabel value="Nombre:" for="txtNombreAcceso"/>
                            <p:inputText id="txtNombreAcceso" value="#{accesoBean.acceso.nombre}" title="Nombre" 
                                         required="true" requiredMessage="El campo 'Nombre' es requerido" style="width: 200px"
                                         readonly="#{accesoBean.soloLectura}"/>
                            <p:outputLabel value=""/>

                            <p:outputLabel value="Fecha de creación" rendered="#{accesoBean.soloLectura}"/>
                            <p:inputText id="txtFechaCreacion" value="#{accesoBean.acceso.fechaCreacion}" style="width: 200px"
                                         readonly="#{accesoBean.soloLectura}" rendered="#{accesoBean.soloLectura}">
                                <f:convertDateTime type="date" locale="es_EC" timeZone="America/Guayaquil"  
                                                   dateStyle="default" pattern="yyyy/dd/MM HH:mm:ss" />
                            </p:inputText>
                            <p:outputLabel rendered="#{accesoBean.soloLectura}" value=""/>

                            <p:outputLabel value="Estado" for="chkEstado" rendered="#{not accesoBean.activarNuevo}"/>
                            <p:selectBooleanCheckbox id="chkEstado" value="#{accesoBean.acceso.estado}"
                                                     disabled="#{accesoBean.soloLectura}" 
                                                     rendered="#{not accesoBean.activarNuevo}"/>
                            <p:outputLabel rendered="#{not accesoBean.activarNuevo}" value=""/>
                        </p:panelGrid>
                        <div align="right">
                            <p:outputLabel value = "* Campos Obligatorios"/>
                        </div>
                        <br/>
                        <p:dataTable id="dtRoles" var="item" 
                                     rendered="#{not accesoBean.activarNuevo}"
                                     value="#{accesoBean.activarModificar ? accesoBean.roles : accesoBean.acceso.rolList}" 
                                     widgetVar="tablaRoles"                                                                  
                                     emptyMessage="No existen datos" selection="#{accesoBean.acceso.rolList}"
                                     style="font-size: x-small;
                                     text-align: center;"  
                                     rowKey="#{item.codRol}">

                            <f:facet name="header">
                                <p:outputPanel>
                                    <h:outputText value="Asignar Roles" />
                                </p:outputPanel>
                            </f:facet>   

                            <p:column selectionMode="multiple" rendered="#{accesoBean.activarModificar}"
                                      style="width:16px;text-align:center"/>

                            <p:column headerText="Nombre" >
                                <p:outputLabel value="#{item.nombre}" style="text-align: center"/>
                            </p:column>

                            <p:column headerText="Descripcion" >
                                <p:outputLabel value="#{item.descripcion}" style="text-align: center"/>
                            </p:column>

                        </p:dataTable>
                        <br/>

                        <div align="center">
                            <p:commandButton rendered="#{accesoBean.activarNuevo}" 
                                             update=":form:dtAccesos,@form:dlDialog:dlAcceso"
                                             action="#{accesoBean.guardar()}" 
                                             partialSubmit="true" process="@form:dlDialog"
                                             icon="ui-icon-disk" value="Guardar" >                                  
                                <p:confirm header="Confirmación" message="Esta seguro de guardar este registro?" icon="ui-icon-alert" />
                            </p:commandButton>                                
                        </div>
                        <div align="center">
                            <p:commandButton  rendered="#{accesoBean.activarModificar}" 
                                              update=":form:dtAccesos,@form:dlDialog:dlAcceso"
                                              action="#{accesoBean.modificar()}" 
                                              partialSubmit="true" process="@form:dlDialog"  
                                              icon="ui-icon-pencil" value="Modificar">                                  
                                <p:confirm header="Confirmación" message="Esta seguro de modificar este registro?" icon="ui-icon-alert" />
                            </p:commandButton>                                  
                        </div> 
                    </p:panel>
                </p:dialog>                    
                <p:confirmDialog style="font-size: small" global="true" showEffect="fade" hideEffect="fade">
                    <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                    <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
                </p:confirmDialog>
            </h:form>
        </ui:define>
    </ui:composition>

</html>
